<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <h2>Vue模板语法</h2>
        <h3>3.1前端渲染方式</h3>
        <p>
            <h4>2、前端渲染方式</h4>
            <ol>
                <li>原生js拼接字符串</li>
                <li>使用前端模板引擎</li>
                <li>使用vue特有的模板语法</li>
            </ol>
        </p>
        <div id="app" class="red">{{msg}}
            <div>{{msg+'--------'+123}}</div>
            <h3 style="color: #666;">运行原理</h3>
            <p>把Vue语法用vue框架编译->原生语法 浏览器解析</p>
            <ul>
                <h4 style="color: #666;">5、模板语法概览</h4>
                <li>差值表达式</li>
                <li>指令</li>
                <li>事件绑定</li>
                <li>属性绑定</li>
                <li>样式绑定</li>
                <li>分支循环结构</li>
            </ul>
        </div>
</body>
<script src="./js/vue.js"></script>
<script>
    /*
        Vue的基本使用步骤
            1、需要提供标签用于填充数据
            2、引入vue.js库文件
            3、可以使用vue的语法做功能了
            4、把vue提供的数据填充到标签里面
    */
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        }
    })
</script>
</html>